<script setup lang="ts">
import { ref, watch } from 'vue';

import { Image } from 'ant-design-vue';

import { asyncFindUrlById } from '#/api';

defineOptions({
  name: 'AvatarView',
  inheritAttrs: false,
});

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
});

const realSrc = ref<string>('');

watch(
  () => props.value,
  () => {
    realSrc.value = '';
    if (props.value) {
      loadSrc();
    }
  },
  { immediate: true },
);

function loadSrc() {
  if (!props.value) {
    return;
  }
  if (props.value.startsWith('http')) {
    return;
  }
  const api = asyncFindUrlById;
  api(props.value).then((res) => {
    if (res.code === 0) {
      realSrc.value = res.data as string;
    }
  });
}
</script>
<template>
  <Image v-bind="$attrs" v-if="realSrc" :src="realSrc" />
</template>
<style lang="less" scoped></style>
